<!--
 * @Description: mapbox
 * @Author: wang_k
 * @Date: 2023-04-19 11:57:09
 * @LastEditTime: 2023-04-19 14:36:56
 * @FilePath: /测试文档(总结)/55.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <style>
    #id {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  </style>
  <div id="map">

  </div>
  <script>
    // First, create a new mapboxgl.Map object and set its container to a HTML element on your page.
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-122.4443, 47.2529],
      zoom: 12
    });

    // Then, add a new source to the map using the ArcGIS image service URL.
    map.addSource('my-image-service', {
      type: 'raster',
      tiles: [
        'https://sampleserver6.arcgisonline.com/arcgis/rest/services/NLCDLandCover2001/ImageServer/tile/{z}/{y}/{x}'
      ],
      tileSize: 256
    });

    // Finally, add a new layer to the map using the source you just created.
    map.addLayer({
      id: 'my-image-layer',
      type: 'raster',
      source: 'my-image-service'
    });
  </script>
</body>

</html>